<script setup lang='ts'>
import moment from "moment";
import coms from '/components/coms'

let pageSize = useRoute().query.pageSize||10
let pageNum = useRoute().query.pageNum||1

console.log(pageSize,pageNum)
// 获取文章列表
const { data: info } = await useServerRequest<{ data: any }>("article/list", {
  method: "POST",
  body: { pageNo: +pageNum, pageSize: +pageSize },
});

// 获取站点信息
const  {data:siteInfo} = await useServerRequest<{ data: any }>("sites/info", {
  method: "POST",
  body: {},
});




console.log(siteInfo.value.result.seo,'siteInfo');
// const router = useRouter();
// const onGoDetail = (item: any) => {
//   router.push({
//     path: "/detail/" + item.id,
//   });
// };
useHead({
  link:[
  { rel: 'shortcut icon', href: siteInfo.value.result.logoUrl},
    { rel: 'apple-touch-icon', href: siteInfo.value.result.logoUrl },
    {ref:'icon',type:'image/x-icon',href:siteInfo.value.result.logoUrl,'data-rh':true}
],
  meta:[{name:'twitter:card',content:'summary_large_image'}]
})

useSeoMeta({
  title: siteInfo.value.result.name,
  description: siteInfo.value.result.description,
  keywords: siteInfo.value.result.keywords,
  ogImage:siteInfo.value.result.logoUrl,
  referrer: "no-referrer",
});

</script>

<template>
  <div id="app">
    
    <div class="page-body">
      <ul class="list">
      <li
        v-for="(item, index) in info.result.data"
        :key="index"
        class="list-item"
      >
        <div class="list-item-left">
          <NuxtLink :to="`/detail/${item.serialNo}`" class="list-item-title">{{
            item.title
          }}</NuxtLink>
          <p class="list-item-desc m-oh-2">{{ item.summary }}</p>
          <p class="list-item-footer">
            <span class='iconfont lishixiao m-margin-right4' style="font-size:12px;"></span>
            <span>{{
              moment(item.updateTime).format("yyyy-MM-DD HH:mm:ss")
            }}</span>
            <span  style="margin-left: 16px;font-size:12px" class="iconfont yueduxiao m-margin-right4"> </span>
            <span>{{ item.viewsCount }}</span>
          </p>
        </div>
        <img
          v-if="item.coverImageUrl"
          :src="item.coverImageUrl"
          alt=""
          style="width: 100px; height: 100px; margin-left: 20px;border-radius: 8px;"
        />
      </li>
       <div class="m-flex-r m-margin-top m-ai-c m-jc-c ">
   
        <a class="page-num" :class="index+1==pageNum?'page-num-active':''" v-for="(item,index) of Math.floor(info.result.total/pageSize)" :href='`/?pageNum=${index+1}`'>{{index+1}}</a>
      </div> 

    </ul>
    <coms :coms="siteInfo.result.components"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#app {
  width: 100%;
  min-height: 100vh;
  padding: 20px 0;
  box-sizing: border-box;
  .page-body{
    width:100%;
    display:flex;
    flex-direction:column;
    @media (min-width: 1000px){
      width:1000px;
      flex-direction:row;
 
  }
    margin:0 auto;
   
    justify-content:center;
  }

  .list {
    max-width: 700px;
    margin: 0 auto;
    &-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-bottom: 1px solid rgba(178, 186, 194, 0.15);
      padding: 16px;
      box-sizing: border-box;
      &-title {
        font-size: 16px;
        font-weight: 600;
        color: #2e3135;
        text-decoration: none;
        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }
      &-desc {
        font-size: 13px;
        color: #5b6169;
        height: 40px;
        line-height: 20px;
        margin-top: 12px;
      }
      &-footer {
        color: #8a919f;
        font-size: 12px;
        margin-top: 8px;
      }
    }
  }
}
.page-num{
  width:30px;
  height:30px;
  line-height:30px;
  background:#eee;
  text-align:center;
  display:inline-block;
  margin-right:10px;
   border-radius:4px;
   &:hover{
    opacity:0.7;
   }
}
.page-num-active{
  background:#333;
  color:#fff;
}
</style>